<template>
	<div class="g-container">
		<!-- 子路由输出 -->
		<div class="g-wrapper">
			<router-view></router-view>
		</div>
		<!--底部tab区域-->
		<!-- route开启路由模式 -->
		<van-tabbar route active-color="#ee0a24">
			<van-tabbar-item v-for="(item, index) in tabList" :key="index" replace :to="item.path" :icon="item.icon">{{
				item.title
			}}</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script setup>
import { RouterView } from 'vue-router'

import { reactive } from 'vue'

const tabList = reactive([
	{ path: '/home', title: '首页', icon: 'home-o' },
	{ path: '/category', title: '分类', icon: 'search' },
	{ path: '/cart', title: '购物车', icon: 'friends-o' },
	{ path: '/my', title: '我的', icon: 'setting-o' },
])
</script>

<style lang="css" scoped>
.g-container {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #f3f4f6;
}

.g-container .g-wrapper {
	height: calc(100vh - 60px);
	overflow: scroll;
}
</style>
